<template>
  <div>
    <el-tag closable type="primary" effect="dark"
      style="border-radius: 0px; padding: 12px 10px; cursor: pointer; margin: 3px 0 3px 20px;">
      <span style="background-color: white; border-radius: 50%; width: 8px; height: 8px; display: inline-block;"></span>
      <span style="padding-left: 5px;">在线用户</span>
    </el-tag>
  </div>
  <!-- ============================= -->
  <hr>

  <el-form :model="queryInfo" label-width="auto" style="max-width: 400px; margin-top: 10px; margin-left: 20px; display: flex;">

    <el-form-item label="测评标题">
      <el-input v-model="queryInfo.name" />
    </el-form-item>

    <el-form-item>
      <el-button style="margin-left: 20px; padding: 0 20px;" type="primary" @click="onSubmit">搜索</el-button>
    </el-form-item>

  </el-form>

  <el-button type="primary" plain icon="Plus" style="padding: 0 15px; height: 28px; margin: 10px 0 0 20px;"
    @click="onAdd">
    <span style="font-size: 13px; font-weight: normal; padding-right: 0px;">新增</span>
  </el-button>

  <el-button type="danger" plain icon="Delete" style="padding: 0 15px; height: 28px; margin: 5px 0 0 20px;"
    @click="onDeletes">
    <span style="font-size: 13px; font-weight: normal; padding-right: 0px;">删除</span>
  </el-button>

  <el-table :data="tableData" style="width: 100%; padding-left: 20px;" @selection-change="handleSelectionChange">

    <el-table-column type="selection" width="55" />
    <el-table-column fixed prop="id" label="编号" />
    <el-table-column prop="name" label="评测标题" />
    <el-table-column prop="simplyintroduce" label="简介" />
    <el-table-column prop="img" label="图片">
      <template #default="scope">
        <el-image v-if="scope.row.img" style="width: 100px; height: 100px" :src="url+ scope.row.img " :fit="fit" />
        <!-- {{url + scope.row.img }} -->
      </template>
    </el-table-column>
    <el-table-column prop="total" label="题目数量" />

    <el-table-column fixed="right" label="操作">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="onEdit(scope.row)">修改</el-button>
        <el-button link type="primary" @click="onDel(scope.row.id)" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <el-pagination v-model:current-page="queryInfo.pageNum" v-model:page-size="queryInfo.pageSize"
    :page-sizes="[2, 3, 4, 5, 6]" layout="total, sizes, prev, pager, next, jumper" :total="total"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" 
    style="padding: 5px 0 0 20px;"/>

  <!-- 对话框 -->
  <el-dialog v-model="dialogVisible" :title="title" width="500" :before-close="handleClose">
    <el-form :model="mindTest" label-width="auto" style="max-width: 600px">
      <el-form-item label="测评标题" class="mb20" style="margin-top: 10px;">
        <el-input v-model="mindTest.name" />
      </el-form-item>
      <el-form-item label="简介" class="mb20">
        <!-- <el-input v-model="mindTest.simplyintroduce" /> -->
        <quill-editor v-model:value="mindTest.simplyintroduce" />
      </el-form-item>
      <!--     <el-form-item label="图片">
        <el-input v-model="mindTest.img" />
      </el-form-item> -->

      <el-form-item label="图片" class="mb20">
        <!-- <el-input v-model="mindTest.img" /> -->
        <el-upload class="avatar-uploader" action="http://localhost:8080/file/upload" v-model:file-list="fileList"
          :show-file-list="true" list-type="picture-card" :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>

      </el-form-item>

      <el-form-item label="题目数量" class="mb20">
        <el-input v-model="mindTest.total" />
      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button style="padding: 0 20px;" type="primary" @click="addOrUpdate">
          {{title}}
        </el-button>
        <el-button style="padding: 0 20px;" @click="close">取消</el-button>
      </div>
    </template>
  </el-dialog>

</template>
  
  <script setup>
  import { onMounted, ref } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus'
  import axios from 'axios';
  import QuillEditor from '@/components/QuillEditor.vue';
  
  const multipleSelection = ref([]);
  
  const handleSelectionChange = (val) => {
    multipleSelection.value = [];
    val.forEach(element => {
      multipleSelection.value.push(element.id);
    });
    //val 是选中的行数据
    //multipleSelection.value 代理对象数组
  }
  
  //批量删除
  const onDeletes = () => {
  
    if(multipleSelection.value.length == 0){
      ElMessage.warning('请选择要删除的用户'); 
  
    } else{
  
      ElMessageBox.confirm(
      '您确定要删除这些用户吗？',
      '系统提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
        .then(() => {
          // let arr = ref([27,29,30]);
          axios.post('heartmark/deletes', multipleSelection.value)
            .then(res => {
              if (res.data.code == 1) {
                ElMessage({
                  type: 'success',
                  message: 'Delete completed',
                })
                getList();
              }
            })
  
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: 'Delete canceled',
          })
        })
  
    }
  
  }
  
  const url = 'http://localhost:8080/file/downLoad?fileName=';
  const tableData = ref([]);
  
  onMounted(() => {
     getList(); 
  })
  
  const queryInfo = ref({
      pageNum: 1,
      pageSize: 3,
      name: ''
    //   其他属性
  })
  
  const total = ref(0);
  
  const getList = ()=>{
      axios.get('heartmark/findByPage', {
          params: queryInfo.value
      })
      .then(res=>{
        let result = res.data;
        // console.log(res);
        if(result.code == 1){
          tableData.value = result.data.list;
          total.value = result.data.total;
        }
      })
  }
  
  //分页
  const handleSizeChange = (val) => {
    queryInfo.value.pageSize = val;
    queryInfo.value.pageNum = 1;
    getList();
  }
  const handleCurrentChange = (val) => {
    queryInfo.value.pageNum = val;
    getList();
  }
  const title = ref('');
  const dialogVisible = ref(false);
  const mindTest = ref({
      name: '',
      simplyintroduce: '',
      img: '',
      total: ''
  })

  //根据测评标题查询
  const onSubmit = () => {
    getList();
  }

  //确定修改或添加
  const addOrUpdate = ()=>{
      if(title.value == '添加'){
          axios.post('heartmark/add', mindTest.value)
           .then(res => {
              getList();
              dialogVisible.value = false;
              ElMessage({
                type:'success',
                message: ' 添加成功！',
              })
            }) 
      }else{
          axios.put('heartmark/update', mindTest.value)
          .then(res => {
              getList();
              dialogVisible.value = false;
              ElMessage({
                type:'success',
                message: ' 编辑成功！',
              })
            })
      }  
  }
  
  const fileList = ref([]);
  
  //新增
  const onAdd = ()=>{
      dialogVisible.value = true;
      title.value = '添加';
      mindTest.value = {
        name: '',
        simplyintroduce: '',
        img: '', 
        total: ''
      }
      fileList.value = [];
  
  }
  //修改
  const onEdit = (row)=>{
      dialogVisible.value = true;
      title.value = '修改';
      mindTest.value = row;
      fileList.value = [
        {
          url: url + mindTest.value.img,
          name: mindTest.value.img,
        }
      ];
  }
  //取消
  const close = ()=>{
      dialogVisible.value = false;
      getList();
      fileList.value = [];
      mindTest.value.simplyintroduce = '';
      console.log(mindTest.value.simplyintroduce+"--------");
  }
  
  //上传成功的方法
  const handleAvatarSuccess = (res, file) => {
    // console.log(res);
    mindTest.value.img = res.data;
  }
  
  const onDel = (id)=>{
    let result1 = '';
    axios.get('myTest/findByTestId/' + id)
      .then(res => {
        result1 = res.data;

        if (result1.data.length != 0) {
          /* ElMessage({
            type: 'warning',
            message: '不可删除',
          }) */
          ElMessage.error('不可删除')
          return;
        }

        axios.get('heartmarkq/findByTestId/'+id)
         .then(res => {
            let result2 = res.data;
            if (result2.data.length!= 0) {
              /* ElMessage({
                type: 'warning',
                message: '不可删除',
              }) */
              ElMessage.error('不可删除')
              return;
            }

            ElMessageBox.confirm(
              '是否确认强退编号为' + '"' + id + '"' + '的测评?',
              '系统提示',
              {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
              }
            )
              .then(() => {
    
                axios.delete('/heartmark/delete/' + id)
                  .then(res => {
                    getList();
                    ElMessage({
                      type: 'success',
                      message: '删除完成！',
                    })
                  })
    
              })
              .catch(() => {
    
                ElMessage({
                  type: 'info',
                  message: '取消删除',
                })
              })


          })

      })
  }

  </script>
  
  <style scoped>
  *{padding: 0; margin: 0;}
  .ml200{margin-left: 200px;}
  .mb20{margin-bottom: 20px;}
  
  .container{padding: 20px;}
  nav{color: rgb(80, 80, 80);}
  nav b{padding: 0 10px; font-size: 14px;}
  
  table{border-collapse: collapse;}
  table tr{border-bottom: 1px solid black; text-align: center; border-color: rgb(218, 218, 218)}
  table tr:hover{background-color: rgb(235, 235, 235);}
  table tr th{padding: 15px 0; width: 126px; color: #555E71; font-size: 13px;}
  table tr th:first-child{width: 50px;}
  table tr th:nth-child(9){width: 180px;}
  
  tr td{color: #828487; font-size: 14px; padding: 15px 0;}
  tr td div{display: inline-block; cursor: pointer;}
  tr td span{font-size: 12px; color: #3EA2FF;}
  
  footer{position: relative; height: 32px; margin-top: 20px;}
  .f-container{display: inline-block; position: absolute; right: 0px;}
  


  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }
  
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
  </style>